<template>
  <!--  <div id="bussiness">-->
  <el-main style="overflow-x: hidden;overflow-y: hidden">
    <div class="data-source">
      数据来源: 四川税务局
    </div>
    <el-row :gutter="20">
      <el-col :span="5" class="b_left">
        <BussinessLeft/>
      </el-col>
      <el-col :span="13" class="b_middle">
        <div>
          <el-row class="cube">
            <el-col :span="8">
              <div class="cube-left">
                <div class="cube-data-left">
                  <!--                  <transition name="el-fade-in-linear">-->
                  <div class="cube-left-title cube-title">{{ cubeTitleLeft }}</div>
                  <div class="cube-left-data">{{ cubeDataLeft }}</div>
                  <!--                  </transition>-->
                </div>

                <img src="../../assets/img/b-img/cube_left.png" alt="">
              </div>
            </el-col>
            <el-col :span="8">
              <div class="cube-mid">
                <div class="cube-data-mid">
                  <div class="cube-mid-title cube-title">{{ cubeTitleMid }}</div>
                  <div class="cube-mid-data">{{ cubeDataMid }}</div>
                </div>
                <img src="../../assets/img/b-img/cube_mid.png" alt="">
              </div>
            </el-col>
            <el-col :span="8">
              <div class="cube-right">
                <div class="cube-data-right">
                  <div class="cube-right-title cube-title">{{ cubeTitleRight }}</div>
                  <div class="cube-right-data">{{ cubeDataRight }}</div>
                </div>
                <img src="../../assets/img/b-img/cube_right.png" alt="">
              </div>
            </el-col>
          </el-row>
          <el-row class="hexagon">
            <el-col :span="7">
              <div class="hexagon1">
                <div class="hexagon-1">
                  <div class="hexagon-1-title">生产数据</div>
                  <div class="hexagon-1-data">203 TB</div>
                </div>
                <img src="../../assets/img/b-img/hexagon1.png" alt="">
              </div>
              <div class="hexagon3">
                <div class="hexagon-3">
                  <div class="hexagon-3-title">历史数据</div>
                  <div class="hexagon-3-data">17 TB</div>
                </div>
                <img src="../../assets/img/b-img/hexagon3.png" alt="">
              </div>
            </el-col>
            <el-col :span="10">
              <div class="hexagon0">
                <div class="hexagon-0">
                  <div class="hexagon-0-data">280 TB</div>
                  <div class="hexagon-0-title">数据总量</div>
                </div>
                <img src="../../assets/img/b-img/hexagon0.gif" alt="">
              </div>
            </el-col>
            <el-col :span="7">
              <div class="hexagon2">
                <div class="hexagon-2">
                  <div class="hexagon-2-title">平台加工数据</div>
                  <div class="hexagon-2-data">57.6 TB</div>
                </div>
                <img src="../../assets/img/b-img/hexagon2.png" alt="">
              </div>
              <div class="hexagon4">
                <div class="hexagon-4">
                  <div class="hexagon-4-title">外部交换数据</div>
                  <div class="hexagon-4-data">2.4 TB</div>
                </div>
                <img src="../../assets/img/b-img/hexagon4.png" alt="">
              </div>
            </el-col>
          </el-row>
          <el-row class="triangle">
            <el-col :span="6">
              <div class="triangle1">
                <div class="triangle-1">
                  <div class="triangle-1-title triangle-title">{{ triangleTitle1 }}</div>
                  <div class="triangle-1-data triangle-data">{{ dataProcess(triangleData1) }}</div>
                </div>
                <img src="../../assets/img/b-img/triangle1.gif" alt="">
              </div>
            </el-col>
            <el-col :span="6">
              <div class="triangle2">
                <div class="triangle-2">
                  <div class="triangle-2-title triangle-title">{{ triangleTitle2 }}</div>
                  <div class="triangle-2-data triangle-data">{{ dataProcess(triangleData2) }}</div>
                </div>
                <img src="../../assets/img/b-img/triangle2.gif" alt="">
              </div>
            </el-col>
            <el-col :span="6">
              <div class="triangle3">
                <div class="triangle-3">
                  <div class="triangle-3-title triangle-title">{{ triangleTitle3 }}</div>
                  <div class="triangle-3-data triangle-data">{{ dataProcess(triangleData3) }}</div>
                </div>
                <img src="../../assets/img/b-img/triangle3.gif" alt="">
              </div>
            </el-col>
            <el-col :span="6">
              <div class="triangle4">
                <div class="triangle-4">
                  <div class="triangle-4-title triangle-title">{{ triangleTitle4 }}</div>
                  <div class="triangle-4-data triangle-data">{{ dataProcess(triangleData4) }}</div>
                </div>
                <img src="../../assets/img/b-img/triangle4.gif" alt="">
              </div>
            </el-col>
          </el-row>


        </div>
      </el-col>
      <el-col :span="5" class="b_right">
        <BussinessRight/>
      </el-col>
    </el-row>

  </el-main>
  <!--  </div>-->

</template>

<script>
import BussinessLeft from "./BussinessLeft";
import BussinessRight from "./BussinessRight";

export default {
  name: "Bussiness",
  data() {
    return {
      // 上层数据
      cubeAllData: [
        {title: '电子底账', size: 26},
        {title: '核心征管', size: 6.16},
        {title: '决策一包', size: 2.7},
        {title: '决策二包', size: 1.5},
        {title: '房地产交易', size: 0.213},
        {title: '电子税务局', size: 0.85},
        {title: '社保费系统', size: 1.2},
        {title: '数据仓库', size: 46},
        {title: '其它系统', size: 60}
      ],
      cubeDataLeft: '',
      cubeDataMid: '',
      cubeDataRight: '',
      cubeTitleLeft: '',
      cubeTitleMid: '',
      cubeTitleRight: '',

      // 中间数据
      hexagonData0: '',
      hexagonData1: '',
      hexagonData2: '',
      hexagonData3: '',
      hexagonData4: '',

      // 下层数据
      triangleData1: '',
      triangleData2: '',
      triangleData3: '',
      triangleData4: '',
      triangleTitle1: '',
      triangleTitle2: '',
      triangleTitle3: '',
      triangleTitle4: '',
      triangleAllData: [
        {title: '电子税务局', size: 0.13},
        {title: '信息共享平台', size: 499937.26},
        {title: '电子底账', size: 7342550.99},
        {title: '业务系统', size: 14115535.50},
        {title: '核心征管', size: 6460877.91},
        {title: '社保费', size: 9641645.40},
        {title: '个税系统', size: 18173.54},
        {title: '防伪税控', size: 2130200.41},
      ],
    }
  },
  components: {
    BussinessRight,
    BussinessLeft
  },
  mounted() {
    let cubeNum = 0
    let cubeData = this.DynamicRendering(3, this.cubeAllData)
    setInterval(() => {
      let currentCubeData = cubeData[cubeNum % 3]
      this.cubeTitleLeft = currentCubeData[0].title
      this.cubeDataLeft = currentCubeData[0].size + ' TB'
      this.cubeTitleMid = currentCubeData[1].title
      this.cubeDataMid = currentCubeData[1].size + ' TB'
      this.cubeTitleRight = currentCubeData[2].title
      this.cubeDataRight = currentCubeData[2].size + ' TB'
      cubeNum += 1
    }, 3000)

    let triangleNum = 0
    let triangleData = this.DynamicRendering(4, this.triangleAllData)
    setInterval(() => {
      let currentTriangleData = triangleData[triangleNum % 2]
      this.triangleTitle1 = currentTriangleData[0].title
      this.triangleData1 = currentTriangleData[0].size
      this.triangleTitle2 = currentTriangleData[1].title
      this.triangleData2 = currentTriangleData[1].size
      this.triangleTitle3 = currentTriangleData[2].title
      this.triangleData3 = currentTriangleData[2].size
      this.triangleTitle4 = currentTriangleData[3].title
      this.triangleData4 = currentTriangleData[3].size

      triangleNum += 1
    }, 3000)
  },
  methods: {
    fomatFloat(value, n) {
      var f = Math.round(value * Math.pow(10, n)) / Math.pow(10, n);
      var s = f.toString();
      var rs = s.indexOf('.');
      if (rs < 0) {
        s += '.';
      }
      for (var i = s.length - s.indexOf('.'); i <= n; i++) {
        s += "0";
      }
      return s;
    },
    dataProcess(size) {
      // debugger
      let sizeLength = String(size).length
      if (sizeLength <= 7) {
        return size + 'MB'
      } else if (sizeLength > 7 && sizeLength < 9) {
        size = this.fomatFloat(size / 1024, 2)
        return size + 'GB'
      } else {
        size = this.fomatFloat(size / Math.pow(1024, 2), 2)
        return size + 'TB'
      }
    },
    DynamicRendering(num, data) {

      let result = [];
      for (var i = 0; i < data.length; i += num) {
        result.push(data.slice(i, i + num));
      }
      return result
    }

  }
}
</script>

<style scoped>
/*数据来源样式*/
.data-source{
  position: absolute;
  color: white;
  background: transparent;
  right: 2.5%;
  top: 4%;
  font-size: 0.75vw;

}

#bussiness {
  width: 50%;
  height: 100%;
}

.el-main {
  width: 50%;
  padding: 5px;
  height: 100%;
}

.el-row {
  width: 100%;
  height: 100%;
  margin-left: 0 !important;
}

.el-col {
  height: 90%;
  position: relative;
  top: 9%;
  /*margin-top: 15%;*/
  /*padding-top: 5%;*/
}

.b_right {
  margin-left: 2.3%;
  background: rgba(0, 17, 44, 0.5);
  /*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 34, 66, 0.8)), to(rgba(0, 193, 222, 0.3))) !important;*/
}

.b_left {
  height: 91%;
  top: 8%;
  margin-left: 1%;
  background: rgba(0, 17, 44, 0.5);
  /*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 34, 66, 0.8)), to(rgba(0, 193, 222, 0.3))) !important;*/

}

/*图片布局*/
img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/*上层立方体*/
.cube {
  position: absolute;
  height: 30%;
  /*color: #ffffff;*/

}

.cube-title {
  background: linear-gradient(to top, #00ccff, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
}

.cube-mid {
  position: relative;
  top: 45%;
  width: 115%;
}

.cube-left {
  position: relative;
  left: 30%;
}

.cube-right {
  position: relative;
  right: 30%;
}

/*中间层六边形 */
.hexagon {
  position: absolute;
  top: 30%;
  height: 50%;
  color: #ffffff;
}

.hexagon0 {
  height: 90%;
  width: 150%;
  position: relative;
  right: 26%;
}

.hexagon0 img {
  height: 100%;
  width: 100%;
}

.hexagon1 {
  width: 150%;
  height: 70%;
  position: relative;
  bottom: 19%;
  right: 15%;
}

.hexagon1 img {
  height: 100%;
  width: 100%;
}

.hexagon2 {
  width: 150%;
  height: 70%;
  position: relative;
  bottom: 19%;
  right: 32%;
}

.hexagon2 img {
  height: 100%;
  width: 100%;
}

.hexagon3 {
  width: 160%;
  height: 70%;
  position: relative;
  bottom: 26%;
  right: 17%;
}

.hexagon3 img {
  width: 100%;
  height: 100%;
}

.hexagon4 {
  width: 160%;
  height: 70%;
  position: relative;
  bottom: 26%;
  right: 41%;
}

.hexagon4 img {
  width: 100%;
  height: 100%;
}

/*底层锥形*/
.triangle {
  position: absolute;
  height: 15%;
  bottom: 0;
  color: #ffffff;
}

.triangle1 {
  width: 70%;
  height: 65%;
  position: relative;
  top: 0;
  left: 55%;
}

.triangle1 img {
  height: 100%;
  width: 100%;
}

.triangle2 {
  width: 70%;
  height: 60%;
  position: relative;
  bottom: 50%;
  left: 30%;
}

.triangle2 img {
  height: 100%;
  width: 100%;

}

.triangle-2-title {
  width: 107%;
}

.triangle3 {
  width: 85%;
  height: 75%;
  position: relative;
  bottom: 15%;
  left: 7%;
}

.triangle3 img {
  height: 100%;
  width: 100%;

}

.triangle4 {
  width: 70%;
  height: 55%;
  position: relative;
  left: 5%;
  bottom: 10%;

}

.triangle4 img {
  height: 100%;
  width: 100%;

}

.cube-data-left {
  position: absolute;
  left: 30%;
  top: 30%;
  font: normal bold 13px arial, sans-serif;
  background: linear-gradient(to top, #7eefff, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
}

.cube-left-data {
  font: normal bold 18px arial, sans-serif;
  margin-top: 5%;
}

.cube-data-mid {
  position: absolute;
  left: 33%;
  top: 30%;
  font: normal bold 13px arial, sans-serif;
  background: linear-gradient(to top, #7eefff, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
}

.cube-mid-data {
  font: normal bold 18px arial, sans-serif;
  margin-top: 5%;
}

.cube-data-right {
  position: absolute;
  left: 30%;
  top: 30%;
  font: normal bold 13px arial, sans-serif;
  background: linear-gradient(to top, #7eefff, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
}

.cube-right-data {
  font: normal bold 18px arial, sans-serif;
  margin-top: 5%;
}

.triangle-1 {
  font: normal bold 10px arial, sans-serif;
}

.triangle-1-data {
  font: normal bold 13px arial, sans-serif;
  margin-top: 2%;
}

.triangle-2 {
  font: normal bold 10px arial, sans-serif;
}

.triangle-2-data {
  font: normal bold 13px arial, sans-serif;
  margin-top: 2%;
}

.triangle-3 {
  font: normal bold 13px arial, sans-serif;
}

.triangle-3-data {
  font: normal bold 16px arial, sans-serif;
  margin-top: 2%;
}

.triangle-4 {
  font: normal bold 6px arial, sans-serif;
}

.triangle-4-data {
  font: normal bold 8px arial, sans-serif;
  margin-top: 2%;
}

.triangle-title {
  background: linear-gradient(to top, #00ccff, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
}

.triangle-data {
  background: linear-gradient(to top, #00ccff, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
}

.hexagon-1 {
  position: absolute;
  left: 31%;
  top: 37%;
}

.hexagon-1-title {
  font: normal bold 20px arial, sans-serif;
  background: linear-gradient(to top, #ffffff, #00fa6d);
  -webkit-background-clip: text;
  color: transparent;
}

.hexagon-1-data {
  margin-top: 5%;
  font: normal bold 23px arial, sans-serif;
  background: linear-gradient(to top, #ffffff, #7eefff);
  -webkit-background-clip: text;
  color: transparent;
}

.hexagon-3 {
  position: absolute;
  left: 31%;
  top: 36%;
}

.hexagon-3-title {
  font: normal bold 20px arial, sans-serif;
  /*text-shadow: #00fa6d 1px 0 0, #d91e1e 0 1px 0, #000000 -1px 0 0, #000 0 -1px 0;*/
  background: linear-gradient(to top, #ffffff, #00fa6d);
  -webkit-background-clip: text;
  color: transparent;

}

.hexagon-3-data {
  margin-top: 5%;
  font: normal bold 23px arial, sans-serif;
  background: linear-gradient(to top, #ffffff, #7eefff);
  -webkit-background-clip: text;
  color: transparent;
}

.hexagon-0 {
  position: absolute;
  left: 29%;
  top: 36%;
}

.hexagon-0-title {
  /*margin-top: 8%;*/
  /*text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;*/
  font: normal bold 30px arial, sans-serif;
  background: linear-gradient(to top, #ffffff, #6181b1);
  -webkit-background-clip: text;
  color: transparent;
}

.hexagon-0-data {
  font: normal bold 30px arial, sans-serif;
  background: linear-gradient(to top, #7eefff, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
}

.hexagon-2 {
  position: absolute;
  left: 20%;
  top: 37%;
}

.hexagon-2-title {
  font: normal bold 20px arial, sans-serif;
  background: linear-gradient(to top, #ffffff, #00fa6d);
  -webkit-background-clip: text;
  color: transparent;
}

.hexagon-2-data {
  margin-top: 5%;
  font: normal bold 23px arial, sans-serif;
  background: linear-gradient(to top, #ffffff, #7eefff);
  -webkit-background-clip: text;
  color: transparent;
}

.hexagon-4 {
  position: absolute;
  left: 22%;
  top: 36%;
}

.hexagon-4-title {
  font: normal bold 20px arial, sans-serif;
  background: linear-gradient(to top, #ffffff, #00fa6d);
  -webkit-background-clip: text;
  color: transparent;
}

.hexagon-4-data {
  margin-top: 5%;
  font: normal bold 23px arial, sans-serif;
  background: linear-gradient(to top, #ffffff, #7eefff);
  -webkit-background-clip: text;
  color: transparent;
}

/*左侧布局*/
.b_left_top {
  height: 40%;
}

.b_left_bottom {
  height: 60%;
}

.b_left_top_title {
  position: relative;
  top: 4%;
  left: -30%;
  color: #ffffff;
  font: normal bold 10px arial, sans-serif;
}

.small-title {
  color: #0b82ce;
  font: normal bold 10px arial, sans-serif;
}

.small-data {
  color: yellow;
  font: normal bold 25px arial, sans-serif;
}


</style>
